<template>

  <el-card class="box-card" style="overflow:auto">
    <div slot="header" class="clearfix" style="height: 30px">
      <h3 style="float: left">App管理</h3>
      <el-button style="float: right" type="primary" round v-on:click="addApps">添加App</el-button>
    </div>
    <div v-if="apps.length === 0||apps === null">
      暂无app信息
    </div>
    <el-collapse v-else >
      <div v-for="app in apps"  class="text item" style="">
        <el-collapse-item >
          <template slot="title" style="background-color: #067bca">
            <h2 style="margin-left: 48%">{{app.appName}}</h2><i class="header-icon el-icon-info"></i>
          </template>
          <el-card style="width: 50%;margin-left: 25%;margin-top: 2%;height: 180px">
            <div class="app_info"><h2 style="float:left;margin-left: 15%">appId:</h2><el-input :value="app.appId" readonly="true" style="width: 40%;float: left;margin-left: 10%"></el-input></div>
            <div class="app_info" style="%;"><h2 style="margin-top: 3%;float:left;margin-left: 15%">appSecret:</h2><el-input :value="app.appSecret" readonly="true" style="width: 40%;float: left;margin-top: 2%;margin-left: 4%"></el-input></div>
          </el-card>
          <el-button type="primary" style="margin-top: 3%; text-align:center" v-on:click="appDetails(app.appId)">查看详情</el-button>
          <el-button type="success" style="margin-top: 3%; text-align:center" v-on:click="analyse(app.appId)">行为数据分析</el-button>
        </el-collapse-item>
      </div>
    </el-collapse>
  </el-card>

</template>
<script>

  import AddAppsForm from "../message/AddAppsForm";
  export default {
    mounted:function () {
      this.getAllApps();
    },
    name: 'AppManager',
    data () {
      return{
        apps:[]
      }
    },
    components: {
      "v-form": AddAppsForm
    },
    methods:{
      appDetails(appId){
        this.$router.push({path:'/app/details',query: {id:appId}})
      },
      getAllApps(){
        let that=this
        this.$axios.get('/api/app/all').then(successResponse =>{
          console.log("data "+that.apps+"hello")
          that.apps=successResponse.data
          console.log(that.apps)
        }).catch(failResponse =>{})
      },
      addApps(){
        this.$msgbox({
          message: <v-form ref="AddAppsForm"></v-form>,
          showCancelButton: true,
          confirmButtonText: '添加',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$refs.AddAppsForm.submitForm()
          location.reload()
        }).catch(msg => {
          if (msg == "cancel") {
            this.$refs.AddAppsForm.resetForm()
            this.$message.info("已取消")
          } else {
            this.$message.error(msg)
          }
        });
      },
      analyse(appId){
        this.$router.push({path:'/app/analyse',query: {id:appId}})
      }
    }
  }
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 100%;
    height: 100%;
  }
  .app_info{
    margin-top: 3%;
    margin-left: 5%;
    margin-bottom: 2%;
  }
  .clearfix{
    height: 25px;
  }
</style>

